<template>

  <div class="page-main">
    <el-row :gutter="30">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header> 退出原因 </template>
          <charts-line :lineData="state.lineData" :line_x="state.line_x"></charts-line>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="30">
      <span class="title-span"
      >2023-01退出原因统计</span
      >
      <el-divider/>
      <el-col :span="24">
        <el-table :data="tableData"   style="width: 100%">
          <el-table-column prop="value_0" label="原因类别"/>
          <el-table-column prop="value_1" label="取消(退出)原因"/>
          <el-table-column prop="value_2" label="例数"/>
          <el-table-column prop="value_3" label="占比">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="exitReason">
import chartsLine from '/@/components/charts/line_rotate.vue';
const tableData = ref([])
const state = reactive({
  lineData: [
    {
      name: '数据1',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series',
      },
      data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120],
    },
  ],
  line_x: [
    '患者未按约定时间前来就诊。',
    '患者或家属未遵守医生嘱咐的用药方式。',
    '患者未完成医生开具的治疗方案。',
    '患者或家属未按要求提供诊断所需的检查资料。',
    '患者或家属私自更改医生开具的治疗方案。',
    '患者或家属未遵循医院规定的就诊流程。',
    '患者或家属拒绝或未及时完成必要的治疗。',
    '患者或家属未向医生及时汇报病情变化。',
    '患者或家属使用不安全或未经批准的医疗器械。',
    '患者或家属未遵守医生指导的术后康复方案。'
  ]})
</script>

<style lang="scss" scoped>
.title-span {
  width: 100%;
  text-align: center;
  margin-top: 15px;
  font-size: 30px;
  font-size: large;
}

</style>
